const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    // 文件名称（指定名称+目录）
    filename: '[name].js',
    // 输出文件目录（将来所有资源输出的公共目录）
    path: resolve(__dirname, 'build'),
    // 所有资源引入的公共路径前缀 --> 一般用于生产环境
    publicPath: '/', // 加载filename前
    /**
     * 通过import引入的文件打包chunk的命名规则，不指定默认为id命名
     */
    chunkFilename: '[name]_chunk.js',  // 非入口(entry)chunk的名称
    /**
     * 正常情况下main.js打包的程序被包裹在函数作用域下，外界是无法引用的，通过liabray可以将其暴露出去
     * 暴露出去的变量名就叫main(var main =)
     * 一般作为暴露一个库去使用（结合dll将某个库单独打包）
     * 一般不用
     */
    library: '[name]',  // 整个库向外暴露的变量名
    libraryTarget: 'window', //将变量添加到window下， window['main']，适用于浏览器段， nodejs环境可添加到 global下
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    }),
  ],
  mode: 'development',
  
}
